<template>
    <div>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content"
                         :style="{width:`${135*(contentInfo.images&&contentInfo.images.length)+'px'}`}">
                        <h1 class="title">{{contentInfo.title}}</h1>
                        <dl class="item" v-for="item in contentInfo.images">
                            <dt>
                                <loadingImage :src="addPrefixHost(item.image)"/>
                            </dt>
                            <dd>
                                {{item.pinyin}}
                            </dd>
                            <dd>
                                {{item.chinese}}
                            </dd>
                            <dd>
                                {{item.english}}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({isServer, redirect, store, params}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                isUpdate: false,
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
        },
        created() {

        },
        computed: {
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle,
                pinyinSwitch: state => state.pinyinSwitch,
            }),
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    .style-3 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
                width: 800px;
            }
            .title {
                font-size: 22px;
            }
            .item {
                margin: 5px;
                display: inline-block;
                text-align: center;
                dt {
                    display: inline-block;
                    width: 2rem;
                    height: 1.3rem;
                    border: .05rem solid #911614;
                    vertical-align: middle;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                }
                dd {
                    font-size: 16px;
                }

            }
        }

    }

</style>
